<template>
  <div class="icons-container">
    <el-tabs type="border-card">
      <!--svg图标-->
      <el-tab-pane label="Icons">
        <div class="grid">
          <div v-for="item of svgIcons" :key="item" @click="generateIconCode(item)">
            <div class="icon-item">
              <svg-icon :icon-class="item" class-name="disabled" />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!--Element-UI图标-->
      <el-tab-pane label="Element-UI Icons">
        <div class="grid">
          <div v-for="item of elementIcons" :key="item" @click="generateElementIconCode(item)">
            <div class="icon-item">
              <i :class="'el-icon-' + item" />
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import svgIcons from '@/views/icons/svg-icons'
import elementIcons from '@/views/icons/element-icons'

export default {
  name: 'IconSelect',
  data() {
    return {
      svgIcons,
      elementIcons
    }
  },
  methods: {
    generateIconCode(symbol) {
      this.$emit('selectIcon', symbol)
    },
    generateElementIconCode(symbol) {
      this.$emit('selectIcon', 'el-icon-' + symbol)
    }
  }
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;

.grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
}

.icon-item {
  margin: 10px;
  height: 20px;
  text-align: center;
  width: 20px;
  float: left;
  font-size: 20px;
  color: #24292e;
  cursor: pointer;
}

.disabled {
  pointer-events: none;
}
}
</style>
